<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1 @click="add">{{ $store.state.clicks }}</h1>
</div>

<div id="app1">
    <h1 @click="add">{{ $store.state.clicks }}</h1>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script>
<script>
    // 一些情况下存在模块重用的情况
    // 1. 创建多个store 实例
    // 2. 同一个store注册多次
    // 上述两种情况是多次使用，但是应该是数据独立的，每个使用的独自操作数据不相互影响，不是共享数据的范畴
    // 这种情况和组件重用一个道理，组件中重用问题，防止数据混乱，data被定义为一个函数，返回一个对象，保持每个引用该组件的都有各自的数据
    const m = {
        // 将state定义为函数，每次创建实例返回一个新的对象, 与data定义为函数异曲同工，为了保证使用方之间互不影响
        state: () => ({
            clicks: 0
        }),
        // 该种定义方式，将导致state对象是公用的，即使多实例情况下也是用的一个state对象，导致操作相互影响
        // state: {
        //     clicks: 0
        // },
        mutations: {
            add(state) {
                state.clicks ++;
            }
        }
    };
    // 目的是创建两个实例，并且互不影响，
    const store = new Vuex.Store(m);
    const store1 = new Vuex.Store(m);

    let vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            add() {
                this.$store.commit('add');
            }
        },
        store
    });

    let vm1 = new Vue({
        el: "#app1",
        data: {
        },
        methods: {
            add() {
                this.$store.commit('add');
            }
        },
        store: store1
    });

</script>
</body>
</html>
